<!--
 * @Author: yangmy
 * @Date: 2022-03-15 14:08:31
 * @FileDescription:当前涨跌
-->
<template>
  <div>
    <com-box :title="data.title">
      <template v-slot>
        <loading v-show="loading" />
        <div class="time">{{ data.time }}</div>
        <div class="goods">
          <div>
            <div
              class="goods-list"
              @click="handGoodsClick(item.goodsName, item.goodsCode)"
              v-for="(item, index) in data.szData"
              :key="index"
            >
              <div class="goods-left">
                <div class="goods-box">
                  <img
                    :src="
                      item.img &&
                      '' + item.img.slice(item.img.indexOf('/images'))
                    "
                    class="goods-img"
                  />
                  <div class="name-unit">
                    <text class="name"
                      ><span v-if="item.goodsName">{{
                        item.goodsName
                      }}</span></text
                    >
                    <text class="unit">
                      <span v-if="item.unit">{{ item.unit }}</span></text
                    >
                  </div>
                </div>
              </div>
              <div class="goods-right">
                <div class="goods-box">
                  <div class="price">
                    <span v-if="item.avgPrice">
                      <span class="price-span">￥</span>
                      {{ item.avgPrice }}
                    </span>
                  </div>

                  <div class="proportion">
                    <div class="red">
                      <span v-if="item.avgPriceD2D">
                        {{ item.avgPriceD2D }}
                      </span>
                    </div>

                    <div class="point red">
                      <img
                        v-if="item.avgPrice"
                        src="~@/assets/images/upper.png"
                        alt=""
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div
              class="goods-list"
              @click="handGoodsClick(item.goodsName, item.goodsCode)"
              v-for="(item, index) in data.xdData"
              :key="index"
            >
              <div class="goods-left">
                <div class="goods-box">
                  <img
                    :src="
                      item.img &&
                      '' + item.img.slice(item.img.indexOf('/images'))
                    "
                    class="goods-img"
                  />
                  <div class="name-unit">
                    <text class="name"
                      ><span v-if="item.goodsName">{{
                        item.goodsName
                      }}</span></text
                    >
                    <text class="unit">
                      <span v-if="item.unit">{{ item.unit }}</span></text
                    >
                  </div>
                </div>
              </div>
              <div class="goods-right">
                <div class="goods-box">
                  <div class="price">
                    <span v-if="item.avgPrice">
                      <span class="price-span">￥</span>
                      {{ item.avgPrice }}
                    </span>
                  </div>

                  <div class="proportion">
                    <div class="green">
                      <span v-if="item.avgPriceD2D">
                        {{ item.avgPriceD2D }}
                      </span>
                    </div>
                    <div class="point green">
                      <img
                        v-if="item.avgPrice"
                        src="~@/assets/images/lower.png"
                        alt=""
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </com-box>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, watch } from 'vue'
import comBox from '@/components/comBox/comBox.vue'
import loading from '@/charts/loading.vue'
import httpRequest from '@/service'
interface IState {
  data: any
  loading: boolean
  getData: (val: any) => void
}
export default defineComponent({
  name: 'LeftTop',
  props: {
    parameters: {
      type: Object,
      default: () => {
        return {
          adCode: '',
          classId: ''
        }
      }
    }
  },
  components: {
    comBox,
    loading
  },
  setup(props, { emit }) {
    const state: IState = reactive({
      data: {},
      loading: false,
      getData: (val) => {
        state.loading = true
        httpRequest
          .get({
            url: 'M3P2dqzd',
            params: {
              adcode: val.adcode,
              classId: val.classId === 'null' ? '' : val.classId
            }
          })
          .then((res) => {
            if (res.code == 200) {
              const resData = JSON.parse(JSON.stringify(res))
              while (resData.szData.length < 3) {
                resData.szData.push({
                  avgPrice: '',
                  avgPriceD2D: '',
                  goodsCode: '',
                  goodsName: '',
                  img: '',
                  unit: ''
                })
              }
              while (resData.xdData.length < 3) {
                resData.xdData.push({
                  avgPrice: '',
                  avgPriceD2D: '',
                  goodsCode: '',
                  goodsName: '',
                  img: '',
                  unit: ''
                })
              }
              state.data = resData
            }
            state.loading = false
          })
          .catch(() => {
            console.log('请求失败')
            state.loading = false
          })
      }
    })
    watch(
      () => {
        return props.parameters
      },
      (val) => {
        state.getData(val)
      },
      {
        deep: true
      }
    )
    const handGoodsClick = (name: string, id: string) => {
      emit('change', name, id)
    }
    const { data, loading } = toRefs(state)
    return {
      data,
      loading,
      handGoodsClick
    }
  }
})
</script>
<style lang="less" scoped>
.time {
  color: rgb(70, 237, 232);
  text-align: right;
  font-weight: 600;
  padding-right: 18px;
  font-family: 'Microsoft YaHei';
  font-size: 14px;
}
.goods {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 10px;
}
.goods-list {
  cursor: pointer;
  background-size: 210px 71px;
  margin: 3.5px 3px;
  background-color: rgba(0, 104, 183, 0.1);
  width: 210px;
  height: 71px;
  z-index: 365;
  display: flex;
  .goods-left {
    width: 62%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .goods-box {
      .goods-img {
        margin: 0 auto;
        display: block;
        max-width: 100px;
        max-height: 45px;
      }
      .name-unit {
        text-align: center;
        font-size: 11px;
        font-family: 'FZZZHONGJW';
        font-weight: 600;
        color: rgb(193, 211, 255);
        .name {
          padding: 0 2px 0 0;
        }
        .unit {
          padding: 0 0 0 2px;
        }
      }
    }
  }
  .goods-right {
    width: 38%;
    height: 100%;
    .goods-box {
      height: 100%;
      display: flex;
      flex-direction: column;
      .price {
        flex: 1;
        font-size: 14px;
        padding-top: 10px;
        span {
          font-family: 'AliHYAiHei';
          color: rgb(193, 253, 255);
          line-height: 1.743;
          .price-span {
            font-family: 'AliHYAiHei';
            color: rgb(193, 211, 255);
            line-height: 1.071;
          }
        }
      }
      .proportion {
        flex: 1;
        font-family: 'Microsoft YaHei';
        display: flex;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        font-weight: 550;
        font-size: 14px;
        .green {
          color: rgb(66, 255, 0);
        }
        .red {
          color: rgb(255, 38, 38);
        }
        .point {
          padding-left: 5px;
          border-radius: 50%;
          position: relative;
          top: 1px;
        }
      }
    }
  }
}
.left-lower {
  margin-top: 30px;
}
// 单位
.Price-unite-time {
  font-size: 10px;
  font-family: 'Microsoft YaHei';
  color: rgba(162, 199, 255, 0.902);
  font-weight: bold;
  line-height: 1.714;
  display: flex;
  justify-content: space-between;
  align-content: center;
  .unite {
    margin-left: 18px;
  }
  .time {
    align-content: center;
  }
}
</style>
